<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/19 0019
  Time: 22:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>工具管理</title>
    <link rel="stylesheet" href="/gzht/lib/layui/css/layui.css" media="all">
    <style type="text/css">
        /*.layui-table-cell{
            height:36px;
            line-height: 36px;
        }*/
        .layui-table-cell {
            height: auto !important;
        }
    </style>
</head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">图元管理</li>
        <li>分类管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table id="yjk" lay-filter="yjk"></table>
        </div>
        <div class="layui-tab-item">
            <table id="fl" lay-filter="fl"></table>
        </div>
    </div>
</div>

<%--添加图元弹出层--%>
<div id="addTool" style="display: none;">
    <form class="layui-form" action="" id="addYjkForm">
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>图元名称</label>
            <div class="layui-input-block">
                <input type="text" name="sm" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>图元代码</label>
            <div class="layui-input-inline">
                <input type="text" name="dm" required lay-verify="required|dm" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>CD</label>
            <div class="layui-input-inline">
                <input type="text" name="cd" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>所属分类</label>
            <div class="layui-input-inline">
                <select name="lbdm" lay-verify="required" lay-filter="lb_select" id="yjk_fl">
                    <option value=""></option>
                </select>
                <input type="hidden" name="lbmc" id="lbmc">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>图片</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="addToolPic">
                    <i class="layui-icon">&#xe67c;</i>添加图片
                </button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" style="width: 110px;height: auto;" id="addToolPicPreview">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addToolCommit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<%--编辑图元弹出层--%>
<div id="editTool" style="display: none;">
    <form class="layui-form" lay-filter="editToolForm" action="" id="editYjkForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>图元名称</label>
            <div class="layui-input-block">
                <input type="text" name="sm" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>图元代码</label>
            <div class="layui-input-inline">
                <input type="text" name="dm" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>CD</label>
            <div class="layui-input-inline">
                <input type="text" name="cd" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>所属分类</label>
            <div class="layui-input-inline">
                <select name="lbdm" lay-filter="edit_yjk_fl" lay-verify="required" id="edit_yjk_fl">
                    <option value=""></option>
                </select>
                <input type="hidden" name="lbmc" id="edit_lbmc">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i style="color: red;">*</i>图片</label>
            <div class="layui-input-inline">
                <img src="" style="max-width: 110px; height: auto;" id="editPic">
                <button type="button" class="layui-btn" id="editToolPic">
                    <i class="layui-icon">&#xe67c;</i>选择图片
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editToolCommit">提交修改</button>
            </div>
        </div>
    </form>
</div>

<%--添加分类弹出层--%>
<div id="addFl" style="display: none;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input type="text" name="lb" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFlCommit">立即提交</button>
            </div>
        </div>
    </form>
</div>

<%--编辑分类弹出层--%>
<div id="editFl" style="display: none;">
    <form class="layui-form" lay-filter="editFlForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input type="text" name="lbName" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editFlCommit">立即提交</button>
            </div>
        </div>
    </form>
</div>

<%--元件库行内编辑--%>
<script type="text/html" id="yjk_bar">
    <a class="layui-btn layui-btn-xs" lay-event="yjk_edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="yjk_del">删除</a>
</script>

<%--分类行内编辑--%>
<script type="text/html" id="fl_bar">
    <a class="layui-btn layui-btn-xs" lay-event="fl_edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="fl_del">删除</a>
</script>

<script src="/gzht/lib/layui/layui.js"></script>
<script>
    layui.config({
        base: '/gzht/lib/layui/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'form', 'upload', 'element', 'jquery', 'treetable'], function () {
        var layer = layui.layer //弹层
            , table = layui.table //表格
            , form = layui.form // 表单
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , $ = layui.jquery // jq
            , treetable = layui.treetable;

        var addYjkLayerIndex; // 添加图元的弹框ID

        //图元图片添加
        var uploadInst = upload.render({
            elem: '#addToolPic' //绑定元素
            , url: '/upload/' //上传接口
            , auto: false
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#addToolPicPreview').attr('src', result); //图片链接（base64）
                });
            }
        });
        // 图元编辑图片
        upload.render({
            elem: '#editToolPic' //绑定元素
            , url: '/upload/' //上传接口
            , auto: false
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#editPic').attr('src', result); //图片链接（base64）
                });
            }
        })

        // 元件库table
        var yjkTable = table.render({
            elem: '#yjk'
            , height: 'full-120'
            , url: '/gzht/tool/list' //数据接口
            , title: '工具表'
            , page: true //开启分页
            , limit: 10
            , limits: [10, 20, 50]
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: false //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {
                    fixed: 'yjk', title: '图元ID', fixed: 'left', templet: function (d) {
                        return d.yjk.id;
                    }
                }
                , {
                    fixed: 'yjk', title: '图片', align: 'center', templet: function (d) {
                        if (d.yjk.pic) {
                            return '<img src="data:image/jpeg;base64,' + d.yjk.pic + '">';
                        }
                        return '<span>暂无</span>';
                    }
                }
                , {
                    fixed: 'yjk', title: '图元名称', fixed: 'left', templet: function (d) {
                        return d.yjk.sm ? d.yjk.sm : "";
                    }
                }
                , {
                    fixed: 'yjk', title: '代码', fixed: 'left', templet: function (d) {
                        return d.yjk.dm ? d.yjk.dm : "";
                    }
                }
                , {
                    fixed: 'yjk', title: 'CD', fixed: 'left', templet: function (d) {
                        return d.yjk.cd ? d.yjk.cd : "";
                    }
                }
                , {
                    fixed: 'yjk', title: '类别', fixed: 'left', templet: function (d) {
                        return d.yjk.lbmc ? d.yjk.lbmc : "";
                    }
                }
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#yjk_bar'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(yjk)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    // 获取所有图元分类
                    $.ajax({
                        url: '/gzht/tool/fenlei',
                        success: function (res) {
                            var fenlei = res.data;
                            $('#yjk_fl').html('<option value=""></option>');
                            for (var item of fenlei) {
                                var option = "<option value='" + item.lbid + "'>" + item.lb + "</option>";
                                $('#yjk_fl').append(option);
                            }
                            form.render();
                            addYjkLayerIndex = layer.open({
                                type: 1,
                                content: $('#addTool'),
                                area: ['30vw', '80vh']
                            });
                        },
                        error: function (err) {
                            layer.msg("网络异常")
                        }
                    })
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        // 获取所有分类
                        $.ajax({
                            url: '/gzht/tool/fenlei',
                            success: function (res) {
                                var fenlei = res.data;
                                $('#edit_yjk_fl').html('<option value=""></option>');
                                for (var item of fenlei) {
                                    var option = "<option value='" + item.lbid + "'>" + item.lb + "</option>";
                                    $('#edit_yjk_fl').append(option);
                                }
                                form.render();
                                var data = checkStatus.data[0];
                                //表单初始赋值
                                editYjkLayerIndex = layer.open({
                                    type: 1,
                                    content: $('#editTool'),
                                    area: ['30vw', '80vh']
                                });
                                $('#editPic').attr('src', 'data:image/jpeg;base64,' + data.yjk.pic)
                                form.val('editToolForm', {
                                    "id": data.yjk.id
                                    , "cd": data.yjk.cd
                                    , "sm": data.yjk.sm
                                    , "dm": data.yjk.dm
                                    , "lbid": 1
                                    , 'pic': 'test'
                                })
                            },
                            error: function (err) {
                                layer.msg("网络异常")
                            }
                        })
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除行么', function (index) {
                            var dms = data.map(function (item, idx) {
                                return item.yjk.dm;
                            })
                            //向服务端发送删除指令
                            $.ajax({
                                url: '/gzht/yjk/delete',
                                type: 'post',
                                data:{
                                    dms: dms
                                },
                                traditional:true,
                                success: function (res) {
                                    if(res.code == 1001){
                                        layer.close(index)
                                        layer.msg("删除成功");
                                        yjkTable.reload()
                                    }else {
                                        layer.msg("删除失败")
                                    }
                                },
                                error: function (err) {
                                    layer.msg("网络错误")
                                }
                            })
                        });
                    }
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(yjk)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'yjk_del') {
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    var dms = [];
                    dms.push(data.yjk.dm)
                    $.ajax({
                        url: '/gzht/yjk/delete',
                        type: 'post',
                        data:{
                            dms: dms
                        },
                        traditional:true,
                        success: function (res) {
                            if(res.code == 1001){
                                layer.close(index);
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.msg("删除成功");
                            }else {
                                layer.msg("删除失败")
                            }
                        },
                        error: function (err) {
                            layer.msg("网络错误")
                        }
                    })
                });
            } else if (layEvent === 'yjk_edit') {
                //表单初始赋值
                layer.open({
                    type: 1,
                    content: $('#editTool'),
                    area: ['30vw', '80vh']
                });
                $('#editPic').attr('src', 'data:image/jpeg;base64,' + data.yjk.pic)
                form.val('editToolForm', {
                    "id": data.yjk.id
                    , "cd": data.yjk.cd
                    , "sm": data.yjk.sm
                    , "dm": data.yjk.dm
                    , "lbid": 1
                    , 'pic': 'test'
                })
            }
        });

        // 监听元件库添加提交
        form.on('submit(addToolCommit)', function (data) {
            // 判断图元图片是否选择
            if (!$('#addToolPicPreview').attr('src')) {
                layer.msg("请选择图元文件")
            } else {
                $.ajax({
                    url: '/gzht/yjk/add',
                    data: new FormData(document.getElementById("addYjkForm")),
                    type: 'post',
                    processData: false,
                    contentType: false,
                    async: false,
                    success: function (res) {
                        if (res.code == 1001) {
                            layer.close(addYjkLayerIndex);
                            layer.msg("添加成功")
                            yjkTable.reload();
                        } else {
                            layer.msg("添加失败")
                        }
                    },
                    error: function (err) {
                        layer.msg("网络异常")
                    }
                })
            }
            return false;
        });
        // 监听元件编辑提交
        form.on('submit(editToolForm)', function (data) {
            $.ajax({
                url: '/gzht/yjk/update',
                data: new FormData(document.getElementById("editYjkForm")),
                type: 'post',
                processData: false,
                contentType: false,
                async: false,
                success: function (res) {
                    if (res.code == 1001) {
                        layer.close(editYjkLayerIndex);
                        layer.msg("更新成功")
                        yjkTable.reload();
                    } else {
                        layer.msg("更新失败")
                    }
                },
                error: function (err) {
                    layer.msg("网络异常")
                }
            })
            return false;
        });

        /*分类*/
        // 渲染表格
        layer.load(2);
        treetableRender = function () {
            treetable.render({
                treeColIndex: 1,
                treeSpid: "",
                treeIdName: 'lbid',//id字段的名称
                treePidName: 'parentId',//parentId字段的名称
                treeDefaultClose: true,
                treeLinkage: true,
                height: 'full-150',
                elem: '#fl',
                url: '/gzht/tool/flTree',
                toolbar: 'default',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                },
                cols: [[
                    {type: 'numbers', title: '序号'},
                    {field: 'lb', title: '大类名称'},
                    {
                        field: 'mcid', title: '子分类ID', templet: function (d) {
                            return (d.mcid == null || d.mcid == 'null') ? "" : d.mcid;
                        }
                    },
                    {
                        field: 'dmmc', title: '子分类名称', templet: function (d) {
                            return (d.dmmc == null || d.dmmc == 'null') ? "" : d.dmmc;
                        }
                    }
                    , {fixed: 'right', width: 165, align: 'center', toolbar: '#fl_bar'}
                ]],
                done: function (res, curr, count) {
                    layer.closeAll('loading');
                }
            })
        }
        treetableRender();
        /*table.render({
            elem: '#fl'
            , height: 'full-120'
            , url: '/gzht/tool/fenlei' //数据接口
            , title: '分类表'
            , page: true //开启分页
            , limit: 10
            , limits: [10,20,50]
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , totalRow: false //开启合计行
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {fixed: 'lbid', title: '分类ID', fixed: 'left', templet: function (d) {
                        return d.lbid;
                    }}
                , {fixed: 'lb', title:'分类名称', align:'center', templet: function (d) {
                        return d.lb;
                    }}
                , {fixed: 'right', width: 165, align: 'center', toolbar: '#fl_bar'}
            ]]
        });*/

        //监听头工具栏事件
        table.on('toolbar(fl)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        content: $('#addFl'),
                        area: '30vw'
                    });
                    break;
                case 'update':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        var item = checkStatus.data[0];
                        layer.open({
                            type: 1,
                            content: $('#editFl'),
                            area: '30vw'
                        });
                        form.val('editFlForm', {
                            "lb": item.lb
                        })
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(fl)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'fl_del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'fl_edit') {
                layer.open({
                    type: 1,
                    content: $('#editFl'),
                    area: '30vw'
                });
                form.val('editFlForm', {
                    "lbName": data.lb
                })
            }
        });

        // 监听分类添加提交
        form.on('submit(addFlCommit)', function (data) {
            $.ajax({
                url: '/gzht/fla55/add',
                type: 'post',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.code == 1001) {
                        layer.msg("添加成功")
                    }
                },
                error: function (err) {

                }
            })
            return false;
        });


        // 监听图元添加的分类选择
        form.on('select(lb_select)', function (data) {
            $('#lbmc').val(data.elem.selectedOptions[0].innerText)
        })
        // 监听图元编辑的分类选择
        form.on('select(edit_yjk_fl)', function (data) {
            $('#edit_lbmc').val(data.elem.selectedOptions[0].innerText)
        })
        // 表单验证
        form.verify({
            dm: function (value, item) {
                // 请求查询是否代码重复
                var repeat = false;
                $.ajax({
                    url: '/gzht/yjk/getByDm',
                    async: false,
                    data: {
                        dm: value
                    },
                    success: function (res) {
                        if (res != null && res.data != null) {
                            if (res.data.length > 0) {
                                // 存在相同代码
                                repeat = true;
                            }
                        }
                    },
                    error: function (err) {
                        layer.msg("网络异常")
                    }
                })
                if (repeat) {
                    return "元件代码冲突";
                }
            }
        });
    });
</script>
</body>
</html>
